{% load static %}
 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>漏洞知识库-上传工具</title>

	<!-- ================= Favicon ================== -->
    <!-- Standard -->
    <link rel="shortcut icon" href="http://placehold.it/64.png/000/fff">
    <!-- Retina iPad Touch Icon-->
    <link rel="apple-touch-icon" sizes="144x144" href="http://placehold.it/144.png/000/fff">
    <!-- Retina iPhone Touch Icon-->
    <link rel="apple-touch-icon" sizes="114x114" href="http://placehold.it/114.png/000/fff">
    <!-- Standard iPad Touch Icon-->
    <link rel="apple-touch-icon" sizes="72x72" href="http://placehold.it/72.png/000/fff">
    <!-- Standard iPhone Touch Icon-->
    <link rel="apple-touch-icon" sizes="57x57" href="http://placehold.it/57.png/000/fff">

    <link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/webuploader/0.1.1/webuploader.css">

<!--引入JS-->
<script type="text/javascript" src="{% static 'assets/js/jquery.js' %}"></script>
<script type="text/javascript" src="{% static 'assets/js/webuploader.js' %}"></script>
<script type="text/javascript" src="{% static 'assets/js/bootstrap.js' %}"></script>

	<!-- Styles -->
    <link href="{% static 'assets/fontAwesome/css/fontawesome-all.min.css' %}" rel="stylesheet">
    <link href="{% static 'assets/css/lib/themify-icons.css' %}" rel="stylesheet">
    <link href="{% static 'assets/css/lib/sidebar.css' %}" rel="stylesheet">
    <link href="{% static 'assets/css/lib/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'assets/css/lib/nestable/nestable.css' %}" rel="stylesheet">
    <link href="{% static 'assets/css/lib/sweetalert/sweetalert.css' %}" rel="stylesheet">
    <link href="{% static 'assets/css/lib/nixon.css' %}" rel="stylesheet">
    <link href="{% static 'assets/css/style.css' %}" rel="stylesheet">



</head>

<body>

    <div class="sidebar sidebar-hide-to-small sidebar-shrink sidebar-gestures">
        <div class="nano">
            <div class="nano-content">
                <ul>
                    <li><a href="/Gr33kLibrary/main/"><i class="ti-home"></i>&nbsp;&nbsp;首页</a></li>
                    <li><a href="/Gr33kLibrary/library/"><i class="ti-harddrives"></i>&nbsp;&nbsp;文库</a></li>
                    <li><a href="/Gr33kLibrary/myarticle/1/"><i class="ti-save-alt"></i>&nbsp;&nbsp;我的文章</a></li>
                    <li><a href="/Gr33kLibrary/mycollect/1/"><i class="ti-star"></i>&nbsp;&nbsp;我的收藏</a></li>
                    <li><a href="/Gr33kLibrary/classify_manage/"><i class="ti-tag"></i>&nbsp;&nbsp;分类管理</a></li>
                    <li><a href="/Gr33kLibrary/tools_manage/"><i class="ti-import"></i>&nbsp;&nbsp;代码&工具管理</a></li>
                    <li><a href="/Gr33kLibrary/update_log/"><i class="ti-folder"></i>&nbsp;&nbsp;更新日志管理</a></li>
                    <li><a href="/Gr33kLibrary/my_setting/"><i class="ti-settings"></i>&nbsp;&nbsp;我的设置</a></li>
                    <li><a href="/Gr33kLibrary/invitation_code_manage/"><i class="ti-vimeo"></i>&nbsp;&nbsp;邀请码管理</a></li>
                    {% if current_user.username == "Gr33k" %}
                        <li><a href="/Gr33kLibrary/verify/"><i class="ti-shield"></i>&nbsp;&nbsp;审核文章</a></li>
                        <li><a href="/Gr33kLibrary/user_manage/1/"><i class="ti-user"></i>&nbsp;&nbsp;用户管理</a></li>
                    {% endif %}
                <li><a href="/Gr33kLibrary/about_me/"><i class="ti-hand-stop"></i>&nbsp;&nbsp;关于我们</a></li>
                </ul>
            </div>
        </div>
    </div><!-- /# sidebar -->




    <div class="header">
        <div class="pull-left">
                        <div class="logo">
                <a href="/Gr33kLibrary/main/">
                    <img id="logoImg"
                    src="{% static 'logo/logo.png' %}"
                    data-logo_big="{% static 'logo/logo.png' %}"
                    data-logo_small="{% static 'logo/logoSmall.png' %}"
                    alt="Nixon" />
                </a>
            </div>
            <div class="hamburger sidebar-toggle">
                <span class="ti-menu"></span>
            </div>
        </div>

        <div class="pull-right p-r-15">
            <ul>

                <li class="header-icon dib"><img class="avatar-img" src="{% static 'assets/images/avatar/1.jpg' %}" alt="" /> <span class="user-avatar">{% if current_user %}{{ current_user.username }}{% else %}未登录{% endif %}<i class="ti-angle-down f-s-10"></i></span>
                    <div class="drop-down dropdown-profile">
                        <div class="dropdown-content-body">
                            <ul>
                                {% if current_user %}
                                    <li><a href="/Gr33kLibrary/change_password/"><i class="ti-loop"></i> <span>修改密码</span></a></li>
                                <li><a href="/Gr33kLibrary/logout/"><i class="ti-power-off"></i> <span>退出</span></a></li>
                                {% else %}
                                <li><a href="/Gr33kLibrary/login/"><i class="ti-power-off"></i> <span>登录</span></a></li>
                                {% endif %}
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <div class="content-wrap">
        <div class="main">
            <div class="container-fluid">
                <div class="main-content">

                    <div class="row">

                        <div class="col-lg-12">
                            <div class="card alert">
                                <div class="card-header">
                                    <h4>工具上传</h4>
                                </div>

                                <div class="card-body">

                                    <div id="uploader" class="wu-example">
                                        <!--用来存放文件信息-->
                                        <div id="thelist" class="uploader-list"></div>
                                        <div class="form-group">
                                                <p class="text-muted m-b-15 f-s-12">请输入<code>工具名称</code></p>
                                                <input type="text" class="form-control input-default " placeholder="在此输入工具名称" name="tool_name" id="tool_name">
                                            </div>
                                        <p class="text-muted m-b-15 f-s-12">请选择<code>文件</code>选择完成后自动上传</p>

{#                                        <div class="btn btn-primary btn-block m-b-10" id="picker">#}
{#                                            选择文件#}
{#                                        </div>#}
                                        <center><div class="btns" id="picker">选择文件</div></center>
                                        <p class="text-muted m-b-15 f-s-12">上传<code>进度</code></p>
                                        <div class="progress" style="width: 100%" align="center">         <!-- 进度条 -->
                                                <div class="progress-bar progress-bar-striped active" role="progressbar" style="width:0%;display: none" id="progressbar"></div>
                                            </div>

                                    </div>


{#                                    <div class="basic-form">#}
{#                                        <form action="/Gr33kLibrary/upload_tool/" method="post" enctype="multipart/form-data">#}
{#                                            {% csrf_token %}#}
{#                                            <div class="form-group">#}
{#                                                <p class="text-muted m-b-15 f-s-12">请输入<code>工具名称</code></p>#}
{#                                                <input type="text" class="form-control input-default " placeholder="在此输入工具名称" name="tool_name">#}
{#                                            </div>#}
{##}
{#                                            <div class="form-group">#}
{#                                                <p class="text-muted m-b-15 f-s-12">选择<code>要上传的文件</code></p>#}
{#                                                <input type="file" name="file">#}
{#                                            </div>#}
{##}
{#                                            <div align="right"><input type="submit" class="btn btn-primary m-b-10 m-l-5" value="上传"></div>#}
{#                                            <center><font color="red">{{ info }}</font></center>#}
{#                                        </form>#}
{#                                    </div>#}



                                </div>
							</div><!-- /# card -->
						</div><!-- /# column -->
                    </div>



                </div>
            </div>
        </div>
    </div>

<script type="text/javascript">
    $(document).ready(function() {
        var task_id = WebUploader.Base.guid();        //产生task_id
        var uploader = WebUploader.create({           //创建上传控件
            {#swf: 'https://cdn.staticfile.org/webuploader/0.1.1/Uploader.swf', //swf位置，这个可能与flash有关#}
            server: '/Gr33kLibrary/files/upload/',                 //接收每一个分片的服务器地址
            pick: '#picker',                          //填上传按钮的id选择器值
            auto: true,                               //选择文件后，是否自动上传
            chunked: true,                            //是否分片
            chunkSize: 10 * 1024 * 1024,              //每个分片的大小，这里为10M
            chunkRetry: 3,                            //某分片若上传失败，重试次数
            threads: 1,                               //线程数量，考虑到服务器，这里就选了1
            duplicate: true,                          //分片是否自动去重
            formData: {                               //每次上传分片，一起携带的数据
                task_id: task_id,
            },
        });

        uploader.on('startUpload', function() {       //开始上传时，调用该方法
            $("#progressbar").css('display','block');
            $('.progress-bar').css('width', '0%');
            $('.progress-bar').text('0%');
        });

        uploader.on('uploadProgress', function(file, percentage) { //一个分片上传成功后，调用该方法
            $('.progress-bar').css('width', percentage * 100 - 1 + '%');
            $('.progress-bar').text(Math.floor(percentage * 100 - 1) + '%');
        });

        uploader.on('uploadSuccess', function(file) { //整个文件的所有分片都上传成功，调用该方法
            //上传的信息（文件唯一标识符，文件名）
            var tool_name = $("#tool_name").val();
            var data = {'task_id': task_id, 'filename': file.source['name'],'tool_name':tool_name };
            $.get('/Gr33kLibrary/upload/complete/', data);          //ajax携带data向该url发请求
            $('.progress-bar').css('width', '100%');
            $('.progress-bar').text('上传完成');
        });

        uploader.on('uploadError', function(file) {   //上传过程中发生异常，调用该方法
            $('.progress-bar').css('width', '100%');
            $('.progress-bar').text('上传失败');
        });
        uploader.on('uploadComplete', function(file) {//上传结束，无论文件最终是否上传成功，该方法都会被调用
            $('.progress-bar').removeClass('active progress-bar-striped');
            $("#progressbar").hidden();
        });

    });
    </script>




    <script src="{% static 'assets/js/lib/jquery.min.js' %}"></script><!-- jquery vendor -->
    <script src="{% static 'assets/js/lib/jquery.nanoscroller.min.js' %}"></script><!-- nano scroller -->
    <script src="{% static 'ajax.js' %}"></script>
    <script src="{% static 'assets/js/lib/sidebar.js' %}"></script><!-- sidebar -->
    <script src="{% static 'assets/js/lib/bootstrap.min.js' %}"></script><!-- bootstrap -->
    <script src="{% static 'assets/js/lib/nestable/jquery.nestable.js' %}"></script><!-- scripit init-->
    <script src="{% static 'assets/js/lib/nestable/nestable.init.js' %}"></script><!-- scripit init-->
    <script src="{% static 'assets/js/lib/sweetalert/sweetalert.min.js' %}"></script><!-- scripit init-->
    <script src="{% static 'assets/js/lib/sweetalert/sweetalert.init.js' %}"></script><!-- scripit init-->
    <script src="{% static 'assets/js/scripts.js' %}"></script><!-- scripit init-->








</body>

</html>